<template>
  <div class="MetaGatteTable" ref="MetaGatteTable">
    <div class="orderInfoItem_bg" :style="'height:' + (rowItem.pageNum * itemHeight + 72) + 'px'">
      <div v-if="rowItem.codeSwith" class="otd_code">
        <div class="otd_codeTitle">序号</div>
        <div v-for="index in rowItem.pageNum" :key="'code_' + index" :class="rowItem.pageNum === index ? 'otd_codeItem MetaGatteTable_borderBottomNone' : 'otd_codeItem'" :style="'height:' + itemHeight + 'px;line-height:' + itemHeight + 'px'">
          {{ index }}
        </div>
      </div>
      <div class="orderInfoTable" :style="'width:' + rowItem.table.width">
        <div v-for="(item,i) in rowItem.table.items" :key="'item_' + i" class="orderInfoTable_item" :style="'width:' + item.width + 'px'">
          <div class="orderInfoTable_title">{{item.title}}</div>
          <div v-for="(dataItem, dataIndex) in datas" :key="'dataItem_' + dataIndex" class="orderInfoTable_dataItem">
            <div :class="(dataIndex === datas.length - 1 && getDataNum(datas) >= rowItem.pageNum) ? 'orderInfoTable_dataItemBg MetaGatteTable_borderBottomNone orderInfoTable_statusNormal' : 'orderInfoTable_dataItemBg orderInfoTable_statusNormal'" :style="'height:' + dataItem.dataList.length * itemHeight + 'px;'">
              <div v-if="item.key === 'status' && dataItem[item.key]" class="orderInfoTable_statusNormalText" :style="'color: ' + item.enum[dataItem[item.key]].color">{{ item.enum[dataItem[item.key]].label }}</div>
              <div v-else class="orderInfoTable_statusNormalText">{{ dataItem[item.key] }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="rowItem.compireSwith" class="otd_compireSwith">
        <div class="otd_compireSwithTitle">区分</div>
        <div v-for="index in rowItem.pageNum" :key="'switchItem_' + index" :class="rowItem.pageNum === index ? 'otd_compireSwithItem MetaGatteTable_borderBottomNone' : 'otd_compireSwithItem'" :style="'height:' + itemHeight + 'px'">
          <div class="otd_compireSwithItemBg" :style="'line-height:' + itemHeight * 0.65 + 'px'">计划</div>
          <div class="otd_compireSwithItemBg" :style="'line-height:' + itemHeight * 0.35 + 'px'">实际</div>
        </div>
      </div>
      <div class="orderGatte">
        <div class="orderGatte_topTitleArea" :style="layoutStyle === 'week' ? 'height: 24px' : 'height: 35px'">
          <div v-for="(item,index) in dateLayout" :key="'topItem_' + index" :class="layoutStyle === 'week' ? 'orderGatte_topTitleItemWeek' : 'orderGatte_topTitleItem'" :style="index + 1 < dateLayout.length && dateLayout[index + 1].thirdLabel === 1 ? 'border-right: 1px solid ##132530' : ''">{{!item.setSecond ? '' : (layoutStyle === 'day' ? item.secondLabel + '月' : item.secondLabel + '年')}}</div>
        </div>
        <div v-if="layoutStyle === 'week'" class="orderGatte_bottomTitleArea" style="height: 23px;">
          <div v-for="(weekItem,weekIndex) in weekOnMonthList" :key="'weekBottomItem_' + weekIndex" class="orderGatte_bottomTitleItemWeek" :style="'width:' + weekItem.ratio + '%'">
            <div class="orderGatte_bottomTitleWeek">{{weekItem.month}}月</div>
          </div>
        </div>
        <div class="orderGatte_bottomTitleArea" :style="layoutStyle === 'week' ? 'height: 23px' : 'height: 35px'">
          <div v-for="(item,index) in dateLayout" :key="'bottomItem_' + index" class="orderGatte_bottomTitleItem">
            <div v-if="layoutStyle === 'week'" class="orderGatte_bottomTitleWeek">{{item.thirdLabel}}</div>
            <div v-else-if="layoutStyle === 'day'" class="orderGatte_bottomTitle">
              {{item.thirdLabel}}
            </div>
            <div v-else-if="layoutStyle === 'month'" class="orderGatte_bottomTitle">
              {{item.thirdLabel}}月
            </div>
          </div>
        </div>
        <div class="orderGatte_contentArea">
          <template v-for="(dataItem, dataIndex) in datas">
            <div v-for="(inItem,inIndex) in dataItem.dataList" :key="inItem.id" class="orderGatte_contentItem" :style="'height:' + itemHeight + 'px'">
              <div v-if="layoutStyle === 'day'" class="orderGatte_contentItemUp">
                <template v-for="(item,index) in dateLayout">
                  <div class="orderGatte_ciUpItemArea" :key="index">
                    <div :class="hasDate(item,inItem.planStartDate,inItem.planEndDate,'color').flag ? 'orderGatte_ciUpItemShow' : 'orderGatte_ciUpItem'" :style="'line-height:' + (itemHeight * 0.5 - 10) + 'px'">
                      <div class="btdPositionText">{{hasDate(item,inItem.planStartDate,inItem.planEndDate,'text').flag ? inItem.planDays + 'D' : ''}}</div>
                      <div v-if="isNowDate(item) && dataIndex === 0 && inIndex === 0" class="nowDateLineSign" :style="'height:' + (rowItem.pageNum * itemHeight + 72 - 35 - 1) + 'px'"></div>  
                    </div>
                  </div>
                </template>
              </div> 
              <div v-if="layoutStyle === 'day'" class="orderGatte_contentItemDown" >
                <template v-for="(item,index) in dateLayout">
                  <div class="orderGatte_ciDownItemArea" :key="index">
                    <div :class="hasDate(item,inItem.startDate,inItem.endDate,'color').flag ? 'orderGatte_ciDownItemShow' : 'orderGatte_ciDownItem'" :style="'line-height:' + (itemHeight * 0.5 - 10) + 'px;background:' + hasDate(item,inItem.startDate,inItem.endDate,'color',inItem.status).color"><div class="btdPositionText">{{hasDate(item,inItem.startDate,inItem.endDate,'text').flag ? inItem.days + 'D' : ''}}</div></div>
                  </div>
                </template>
              </div>
              <div v-if="layoutStyle === 'week' || layoutStyle === 'month'" class="orderGatte_contentItemUp">
                <template v-for="(item,index) in dateLayout">
                  <div class="orderGatte_ciUpWeekItemBg" :key="index">
                    <template v-for="(dateI,dateIndex) in item.date">
                      <div class="orderGatte_ciUpWeekItemArea">
                        <div :class="hasDate(dateI,inItem.planStartDate,inItem.planEndDate,'color').flag ? 'orderGatte_ciUpWeekItemShow' : 'orderGatte_ciUpWeekItem'" :style="'line-height:' + (itemHeight * 0.5 - 10) + 'px'">
                          <div class="btdPositionText">{{hasDate(dateI,inItem.planStartDate,inItem.planEndDate,'text').flag ? inItem.planDays + 'D' : ''}}</div>
                          <div v-if="isNowDate(dateI) && inIndex === 0 && dataIndex === 0" class="nowDateLineSignWeek" :style="'height:' + (rowItem.pageNum * itemHeight + 72 - 24 - 1) + 'px'"></div>
                        </div>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
              <div v-if="layoutStyle === 'week' || layoutStyle === 'month'" class="orderGatte_contentItemDown" >
                <template v-for="(item,index) in dateLayout">
                  <div class="orderGatte_ciDownWeekItemBg" :key="index">
                    <template v-for="dateI in item.date">
                      <div class="orderGatte_ciDownWeekItemArea">
                        <div :class="hasDate(dateI,inItem.startDate,inItem.endDate,'color').flag ? 'orderGatte_ciDownWeekItemShow' : 'orderGatte_ciDownWeekItem'" :style="'line-height:' + (itemHeight * 0.5 - 10) + 'px;background:' + hasDate(dateI,inItem.startDate,inItem.endDate,'color',inItem.status).color"><div class="btdPositionText">{{hasDate(dateI,inItem.startDate,inItem.endDate,'text').flag ? inItem.days + 'D' : ''}}</div></div>
                      </div>
                    </template>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import utils from '@/utils/utils'
export default {
  name: 'MetaGatteTable',
  components: {},
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    },
    rowItem: {
      // 访问接口的参数
      type: Object,
      default: () => {
        return {}
      }
    },
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    },
    totalPage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      itemHeight: 0,
      dateLayout: [],
      dateRule: [],
      weekOnMonthList: [],
      layoutStyle: 'day'
    }
  },
  mounted() {
    this.itemHeight = 60

    this.gatteDateLayout()
  },
  methods: {
    gatteDateLayout() {
      let startYear = parseInt(this.subStringBySignGetBefore(this.startDate))
      let middleStr1 = this.subStringBySign(this.startDate)
      let startMonth = parseInt(this.subStringBySignGetBefore(middleStr1))
      let startDay = parseInt(this.subStringBySign(middleStr1))

      let endYear = parseInt(this.subStringBySignGetBefore(this.endDate))
      let middleStr2 = this.subStringBySign(this.endDate)
      let endMonth = parseInt(this.subStringBySignGetBefore(middleStr2))
      let endDay = parseInt(this.subStringBySign(middleStr2))

      let timesBetween = new Date(this.endDate).getTime() - new Date(this.startDate).getTime()
      let daysBetween = Math.floor(timesBetween / 1000 / 60 / 60 / 24)

      
      let nowDay = startDay
      let nowMonth = startMonth
      let nowYear = startYear
      this.dateRule = []
      for (let i = startDay; i <= daysBetween + startDay; i++) {
        let monthWhole = this.getDayNumByMonth(nowYear, nowMonth)
        let item = {}
        item.year = nowYear
        item.month = nowMonth
        item.date = nowDay
        item.wholeDate = nowYear + '-' + (nowMonth >= 10 ? nowMonth : '0' + nowMonth) + '-' + (nowDay >= 10 ? nowDay : '0' + nowDay)
        item.week = this.getWeekNumber(nowYear,nowMonth,nowDay)
        if (nowDay < monthWhole) {
          nowDay++  
        } else {
          nowDay = 1
          nowMonth++
          if (nowMonth >= 13) {
            nowMonth = 1
            nowYear++
          }
        }
        this.dateRule.push(item)
      }
      let indexSignList = []
      if (daysBetween <= 42) { // 6周
        this.layoutStyle = 'day'
        this.dateLayout = []
        let secondLabelIndex = 0
        let secondLabel = this.dateRule[0].month
        for (let i in this.dateRule) {
          let item = {}
          item.firstLabel = this.dateRule[i].year
          item.secondLabel = this.dateRule[i].month
          item.thirdLabel = this.dateRule[i].date >= 10 ? this.dateRule[i].date : "0" + this.dateRule[i].date
          item.setSecond = false
          item.date = []
          item.date.push(this.dateRule[i])
          this.dateLayout.push(item)

          if (this.dateRule[i].month !== secondLabel) {
            indexSignList.push(i)
            secondLabelIndex = 0
          }
          secondLabelIndex++
          secondLabel = this.dateRule[i].month
        }
      }else if (daysBetween > 42 && daysBetween <= 26 * 7) { // 26周
        this.layoutStyle = 'week'
        this.dateLayout = []
        let weekIndex = this.dateRule[0].week
        let dateList = []

        let secondLabelIndex = 0
        let secondLabel = this.dateRule[0].year

        for (let i in this.dateRule) {
          if(this.dateRule[i].week !== weekIndex || i == this.dateRule.length - 1) {
            if (i == this.dateRule.length - 1) {
              dateList.push(this.dateRule[i])
            }
            let item = {}
            item.firstLabel = '-'
            item.secondLabel = this.dateRule[i - 1].year
            item.thirdLabel = (this.dateRule[i - 1].week >= 10 ? this.dateRule[i - 1].week : "0" + this.dateRule[i - 1].week) + "周"
            item.setSecond = false
            item.date = []
            item.date = Object.assign([], dateList) 
            this.dateLayout.push(item)
            dateList = []

            if (item.secondLabel !== secondLabel) {
              indexSignList.push(this.dateLayout.length - 1)
              secondLabelIndex = 0
            }
            secondLabelIndex++
            secondLabel = item.secondLabel
          } 
          dateList.push(this.dateRule[i])
          weekIndex = this.dateRule[i].week
        }

        // 周和月对应关系
        this.weekOnMonthList = []
        let monthIndex = this.dateRule[0].month
        let weekList = []
        
        let wholeRatio = 0.00
        let leftRatio = 0
        for (let i = 0; i < this.dateLayout.length; i++) {
          let layoutItem = this.dateLayout[i]
          for (let j = 0; j < layoutItem.date.length; j++) {
            if (layoutItem.date[j].month !== monthIndex) {
              
              let ratio = weekList.length
              if(ratio > 0 && weekList[0].date[0].month !== monthIndex){
                ratio = ratio - 1
              }
              if (j !== 0) {
                let oneProcent = 1 / this.dateLayout.length
                let leftProcent = (j + 1) / layoutItem.date.length * oneProcent
                let wholeProcent = ratio / this.dateLayout.length + leftProcent + leftRatio
                leftRatio = (1 - ((j + 1) / layoutItem.date.length)) * oneProcent
                ratio = parseFloat(wholeProcent * 100).toFixed(2)
                weekList.push(this.dateLayout[i])
              } else {
                ratio = parseFloat(((ratio / this.dateLayout.length) + leftRatio) * 100).toFixed(2)
                leftRatio = 0
              }
              wholeRatio = parseFloat(parseFloat(wholeRatio) + parseFloat(ratio)).toFixed(2)
              let womItem = {}
              womItem.month = monthIndex
              womItem.weeks = []
              womItem.weeks = weekList
              womItem.ratio = ratio
              womItem.wholeRatio = wholeRatio
              this.weekOnMonthList.push(womItem)
              weekList = []
              monthIndex = layoutItem.date[j].month
              break
            }
          }
          weekList.push(this.dateLayout[i])

          if(i === this.dateLayout.length - 1){
            let womItem = {}
            womItem.ratio = parseFloat(100.00 - wholeRatio).toFixed(2)
            womItem.month = layoutItem.date[layoutItem.date.length - 1].month
            womItem.weeks = []
            womItem.weeks = weekList
            this.weekOnMonthList.push(womItem)
          }
        }
      } else {
        this.layoutStyle = 'month'
        this.dateLayout = []
        let monthIndex = this.dateRule[0].month
        let dateList = []

        let secondLabelIndex = 0
        let secondLabel = this.dateRule[0].year

        for (let i in this.dateRule) {
          if(this.dateRule[i].month !== monthIndex || i == this.dateRule.length - 1) {
            if (i == this.dateRule.length - 1) {
              dateList.push(this.dateRule[i])
            }
            let item = {}
            item.firstLabel = '-'
            item.secondLabel = this.dateRule[i - 1].year
            item.thirdLabel = (this.dateRule[i - 1].month >= 10 ? this.dateRule[i - 1].month : "0" + this.dateRule[i - 1].month)
            item.setSecond = false
            item.date = []
            item.date = Object.assign([], dateList) 
            this.dateLayout.push(item)
            dateList = []

            if (item.secondLabel !== secondLabel) {
              indexSignList.push(this.dateLayout.length - 1)
              secondLabelIndex = 0
            }
            secondLabelIndex++
            secondLabel = item.secondLabel
          } 
          dateList.push(this.dateRule[i])
          monthIndex = this.dateRule[i].month
        }
      }

      if (indexSignList.length > 0) {
        for (let i in indexSignList) {
          let index = parseInt(parseInt(indexSignList[i]) / 2)
          this.dateLayout[index].setSecond = true
        }
        let lastIndex = parseInt(indexSignList[indexSignList.length - 1])
        let lIndex = parseInt((this.dateLayout.length - lastIndex) / 2 + lastIndex)
        this.dateLayout[lIndex].setSecond = true

      } else {
        let index = parseInt(this.dateLayout.length / 2)
        this.dateLayout[index].setSecond = true
      }
    },
    getDayNumByMonth(year,month) {
      return new Date(year,month,0).getDate()
    },
    getDayNumOfWeek(year,month,date) {
      let day = new Date(year,month - 1,date).getDay()
      return day
    },
    getWeekNumber(y, m, d) {
      var targetDay = new Date(y, m - 1, d);
      var year = targetDay.getFullYear();
      var month = targetDay.getMonth();
      var days = targetDay.getDate();
      //那一天是那一年中的第多少天
      for (var i = 1; i < m; i++) {
          days += this.getMonthDays(year, i);
      }
      //那一年第一天是星期几
      var yearFirstDay = new Date(year, 0, 1).getDay();
      //计算是第几周
      days += yearFirstDay;
      var week = Math.ceil(days / 7);
      return week;
    },
    isLeapYear(year) {
      return (year % 400 == 0) || (year % 4 == 0 && year % 100 != 0);
    },
    getMonthDays(year, month) {
      return [31, (this.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1];
    },
    subStringBySign(str) {
      var strIndex = str.indexOf("-") + 1;
      var resultStr = str.substr(strIndex, str.length);
      return resultStr;
    },
    subStringBySignGetBefore(str) {
      var strIndex = str.indexOf("-");
      var resultStr = str.substr(0, strIndex);
      return resultStr;
    },
    hasDate(item, startDate, endDate, type, status) {
      let rData = {}
      rData.flag = false
      if (!startDate || !endDate) {
        return rData
      }

      let startTime = new Date(startDate).getTime()
      let endTime = new Date(endDate).getTime()
      let nowTime = 0
      let nowDate = ""
      if (this.layoutStyle === 'day') {
        nowTime = new Date(item.date[0].wholeDate).getTime()
        nowDate = item.date[0].wholeDate
      } else {
        nowTime = new Date(item.wholeDate).getTime()
        nowDate = item.wholeDate
      }

      if (type === 'color') {
        if(nowTime >= startTime && nowTime <= endTime){
          if (status) {
            if (status === '10') {
              rData.color = '#4AC9E8'
            }else if (status === '20') {
              rData.color = '#27FF1C'
            }else if (status === '30') {
              rData.color = '#DEA014'
            }else if (status === '40') {
              rData.color = '#EF531D'
            }else if (status === '50') {
              rData.color = '#AC00D7'
            }
          }
          rData.flag = true
        }else {
          if (status) {
            rData.color = 'unset'
          }
        }
        return rData
      } else if (type === 'text') {
        let dateRuleStartTime = new Date(this.dateRule[0].wholeDate).getTime()
        let dateRuleEndTime = new Date(this.dateRule[this.dateRule.length - 1].wholeDate).getTime()
        
        let sTime = startTime
        let eTime = endTime
        if (startTime < dateRuleStartTime) {
          sTime = dateRuleStartTime
        }
        if (endTime > dateRuleEndTime) {
          eTime = dateRuleEndTime
        }
        let middleTime = parseInt((eTime - sTime) / 2) + sTime
        let rDate = utils.formatDate('yyyy-MM-dd', new Date(middleTime))
        if (nowDate && rDate && nowDate === rDate) {
          rData.flag = true
        }
        return rData
      }
      return rData
    },
    getDataNum(datas) {
      let num = 0
      for (let i in datas) {
        num += datas[i].dataList.length
      }
      return num
    },
    isNowDate(item) {
      let flag = false
      let mDate = new Date().getTime() + (24 * 60 * 60 * 1000)
      let nowDate = utils.formatDate('yyyy-MM-dd', new Date(mDate))
      if (this.layoutStyle === 'day') {
        for (let i in item.date) {
          if (item.date[i].wholeDate === nowDate) {
            flag = true
            break
          }
        }
      }else {
        if (item.wholeDate === nowDate) {
          flag = true
        }
      }
      return flag
    }
  }
}
</script>
<style lang="less" scoped>
.MetaGatteTable {
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
  // display: flex;
  // flex-direction: row;
  // flex: 1;
  // .orderCategoryItem {
  //   height: 100%;
  //   box-sizing: border-box;
  //   padding-top: 70px;
  // }
  .orderInfoItem_bg{
    height: 100%;
    display: flex;
    flex-direction: row;
    border: 1px solid #132530;
    overflow: hidden;
    background: #03030C;
    .orderInfoTable {
      height: 100%;
      .orderInfoTable_item {
        float: left;
        height: 100%;
        border-right: 1px solid #132530;
        .orderInfoTable_title {
          height: 70px;
          line-height: 70px;
          text-align: center;
          border-bottom: 1px solid #132530;
          color: #01d2ff;
          font-size: 16px;
          background: rgba(1,23,33,0.8);
        }
        .orderInfoTable_dataItem{
          width: 100%;
          float: left;
          .orderInfoTable_statusNormal {
            padding: 0 5px;
            display: flex;
            align-items: center;
            .orderInfoTable_statusNormalText{
              white-space: normal;
              line-height: 18px;
              text-align: center;
              max-height: 54px;
              width: 100%;
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
          .orderInfoTable_dataItemBg {
            text-align: center;
            border-bottom: 1px solid #132530;
            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
            // padding: 0 5px;
            .orderInfoTable_statusNormal {
              padding: 0 5px;
              display: flex;
              align-items: center;
              .orderInfoTable_statusNormalText{
                white-space: normal;
                line-height: 18px;
                text-align: center;
                max-height: 54px;
                width: 100%;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
              }
            }
            .orderInfoTable_status {
              width: 100%;
              height: 100%;
              font-weight: bold;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              .orderInfoTable_statusText {
                width: 100%;
                height: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .orderInfoTable_statusNum {
                width: 100%;
                height: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .orderInfoTable_statusOther {
                width: 100%;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .orderInfoTable_statusBgGreen {
              // background: #67ff25;
              background: #3ac809;
              // color: #333;
            }
            .orderInfoTable_statusBgRed {
              // background: #fd5724;
              background: #f54927;
              // color: #333;
            }
            .orderInfoTable_statusBgYellow {
              // background: #ffc600;
              background: #f5b00b
              // color: #333;
            }
          }
        }
      }
    }
    .otd_code {
      width: 60px;
      height: 100%;
      border-right: 1px solid #132530;
      .otd_codeTitle {
        flex-shrink: 0;
        height: 70px;
        width: 100%;
        line-height: 70px;
        text-align: center;
        border-bottom: 1px solid #132530;
        color: #01d2ff;
        font-size: 20px;
        background: rgba(1,23,33,0.8);
      }
      .otd_codeItem {
        width: 100%;
        border-bottom: 1px solid #132530;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        .otd_codeItemBorderBottom {
          border-bottom: 1px solid #132530;
        }
      }
    }
    .otd_code>.otd_codeItem:nth-child(2n + 1) {
      background: rgba(1,23,33,0.8);
    }
    .otd_compireSwith {
      width: 88px;
      height: 100%;
      border-right: 1px solid #132530;
      .otd_compireSwithTitle {
        flex-shrink: 0;
        height: 70px;
        width: 100%;
        line-height: 70px;
        text-align: center;
        border-bottom: 1px solid #132530;
        color: #01d2ff;
        font-size: 20px;
        background: rgba(1,23,33,0.8);
      }
      .otd_compireSwithItem {
        width: 100%;
        border-bottom: 1px solid #132530;
        box-sizing: border-box;
        .otd_compireSwithItemBg {
          height: 50%;
          width: 100%;
          text-align: center;
          box-sizing: border-box;
          color: white;
        }
        .otd_compireSwitchItemBorderBottom {
          border-bottom: 1px solid #132530;
        }
      }
    }
    .otd_compireSwith>.otd_compireSwithItem:nth-child(2n + 1) {
      background: rgba(1,23,33,0.8);
    }
    .orderGatte{
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      .orderGatte_topTitleArea {
        width: 100%;
        display: flex;
        flex-direction: row;
        background: rgba(1,23,33,0.8);
        flex-shrink: 0;
        .orderGatte_topTitleItem {
          flex: 1;
          height: 100%;
          line-height: 35px;
          border-bottom: 1px solid #132530;
          text-align: center;
          border-right: 1px solid rgba(0,0,0,0);
          white-space: nowrap;
          color: #01d2ff;
          font-size: 18px;
        }
        .orderGatte_topTitleItemWeek {
          flex: 1;
          height: 100%;
          line-height: 24px;
          border-bottom: 1px solid #132530;
          text-align: center;
          border-right: 1px solid rgba(0,0,0,0);
          white-space: nowrap;
          color: #01d2ff;
          font-size: 16px;
        }
      }
      .orderGatte_bottomTitleArea {
        width: 100%;
        display: flex;
        background: rgba(1,23,33,0.8);
        flex-direction: row;
        flex-shrink: 0;
        .orderGatte_bottomTitleItem {
          flex: 1;
          height: 100%;
          border-right: 1px solid #132530;
          .orderGatte_bottomTitle {
            width: 100%;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #132530;
            text-align: center;
            font-size: 15px;
            color: white;
          }
          .orderGatte_bottomTitleWeek {
            width: 100%;
            height: 23px;
            line-height: 23px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #132530;
            color: white;
            overflow: hidden;
          }
        }
        .orderGatte_bottomTitleItemWeek {
          height: 100%;
          border-right: 1px solid #132530;
          float: left;
          .orderGatte_bottomTitleWeek {
            width: 100%;
            height: 23px;
            line-height: 23px;
            text-align: center;
            font-size: 14px;
            border-bottom: 1px solid #132530;
            color: white;
          }
        }
      }
      .orderGatte_contentArea{
        flex: 1;
        width: 100%;
        .orderGatte_contentItem {
          width: 100%;
          float: left;
          border-bottom: 1px solid #132530;
          .orderGatte_contentItemUp {
            width: 100%;
            float: left;
            height: 50%;
            // border-bottom: 1px solid #132530;
            display: flex;
            flex-direction: row;
            .orderGatte_ciUpItemArea {
              box-sizing:border-box;
              height:100%;
              flex:1;
              padding-top: 10px;
              .orderGatte_ciUpItem {
                width: 100%;
                height: 100%;
              }
              .orderGatte_ciUpItemShow {
                width: 100%;
                height: 100%;
                background: #126EAA;
                color: white;
                font-size: 18px;
                font-weight: bold;
              }
            }
            // .orderGatte_ciUpItemShow {
            //   box-sizing:border-box;
            //   height:100%;
            //   display:flex;
            //   flex-direction: row;
            //   background: #126EAA;
            //   color: white;
            // }
            .orderGatte_ciUpWeekItemBg {
              display: flex;
              flex: 1;
              flex-direction: row;
              height:100%;
              .orderGatte_ciUpWeekItemArea {
                box-sizing:border-box;
                height:100%;
                flex: 1;
                padding-top: 10px;
                .orderGatte_ciUpWeekItem {
                  width: 100%;
                  height: 100%;
                }
                .orderGatte_ciUpWeekItemShow {
                  width: 100%;
                  height: 100%;
                  background: #126EAA;
                  // color: #AAE3FE;
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                }
              }
            }
          }
          .orderGatte_contentItemDown{
            width: 100%;
            float: left;
            height: 50%;
            display: flex;
            flex-direction: row;
            .orderGatte_ciDownItemArea {
              box-sizing:border-box;
              height:100%;
              flex:1;
              padding-bottom: 10px;
              .orderGatte_ciDownItem {
                width: 100%;
                height:100%;
              }
              .orderGatte_ciDownItemShow {
                width: 100%;
                height:100%;
                // background: #ffc000;
                font-size: 18px;
                color: white;
                font-weight: bold;
              }
            }
            // .orderGatte_ciDownItemShow {
            //   box-sizing:border-box;
            //   height:100%;
            //   display:flex;
            //   flex-direction: row;
            //   background: #ffc000;
            // }
            
            .orderGatte_ciDownWeekItemBg {
              display: flex;
              flex: 1;
              flex-direction: row;
              height:100%;
              .orderGatte_ciDownWeekItemArea {
                box-sizing:border-box;
                height:100%;
                flex: 1;
                padding-bottom: 10px;
                .orderGatte_ciDownWeekItem {
                  width: 100%;
                  height: 100%;
                }
                .orderGatte_ciDownWeekItemShow {
                  width: 100%;
                  height: 100%;
                  // background: #ffc000;
                  font-size: 18px;
                  color: white;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
  }
}
.MetaGatteTable_borderBottomNone{
  border-bottom: 0!important;
}
.orderGatte_contentItem:nth-child(2n) {
  background: rgba(1,23,33,0.8);
}
.btdPositionText {
  position: absolute;
}
.nowDateLineSign {
  position: absolute;
  width: 2px;
  background: #ffc000;
  margin-top: -45px;
  margin-left: -1px;
}
.nowDateLineSignWeek {
  position: absolute;
  width: 2px;
  background: #ffc000;
  margin-top: -55px;
  margin-left: -1px;
}
.workDel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:after, :before {
  box-sizing: unset;
  -webkit-box-sizing: unset;
}
</style>
